<template>
	<view id="server">
		<!-- <div class="serverCont">
			专业老师上课服务，请准时～
		</div> -->
		<div class="tabarweek">
			<weektab :monthList='classDetail.day' :FtabCurrent='FtabCurrent' @tabChange='tabChange' @openDown='openDown'
				:showWeek='showWeek'></weektab>
		</div>
		<div class="serverTime" v-if="serachTime" @click='openDown'>
			搜索时间：<span>{{serachTime}}</span>
		</div>

		<div class="tabar">
			<tab :typeList='classDetail.type' :moType='moType' @tabChangeType='tabChangeType'></tab>
		</div>
		<!-- 这里是tab对应的内容 -->
		<div class="serverList">
			<list :list="classPageList"></list>
		</div>
		<!-- 日历 -->
		<u-calendar color="#9013FE" :show="show" :mode="mode" @confirm="confirm" @close='show=false'></u-calendar>

	</view>
</template>

<script>
	import tab from './components/tab.vue'
	import list from './components/list.vue'
	import weektab from './components/weekTab.vue'
	export default {
		components: {
			tab,
			list,
			weektab
		},
		data() {
			return {
				anchor_id: uni.getStorageSync('author_id'),
				classDetail: {},
				classPageList: [],
				time: '',
				type: '',
				moType: '',
				show: false,
				showWeek: false,
				mode: 'single',
				time: '',
				serachTime: '',
				FtabCurrent: 0,

			};
		},
		onShow() {
			this.$utils.isLogin()

		},
		onLoad(opt) {
			this.tabCurrent = 0
			this.moType = uni.getStorageSync('moId') || 0
			this.getClasssIndex()
		},
		onLaunch() {
			uni.removeStorageSync('moId')
			uni.setStorageSync('moId', 0)
		},
		onHide() {
			uni.removeStorageSync('moId')
			uni.setStorageSync('moId', 0)
		},
		onPullDownRefresh() {
			this.getClassList()
		},
		methods: {
			confirm(e) {
				this.time = this.serachTime = e[0]
				this.FtabCurrent = -1
				this.show = !this.show
				console.log(this.time);
				this.getClassList()
			},
			openDown() {
				this.show = !this.show
				console.log('show', this.show)
			},
			async getClasssIndex(type) {
				const {
					data
				} = await this.$request(this.$Api.classsIndex, {
					anchor_id: this.anchor_id
				}, "POST")
				uni.stopPullDownRefresh()
				if (data.code !== 0) return
				this.classDetail = data.data
				if (data.data.day && type != 1) {
					this.time = data.data.day[0].times
				}
				if (data.data.type && type != 1) {
					const index = this.moType || 0
					this.type = data.data.type[index].title
				}
				this.getClassList()
				console.log('1112', data.data.day.lenght)
			},
			// classsList
			async getClassList(type, time) {
				const params = {
					type: this.type,
					time: this.time
				}
				const {
					data
				} = await this.$request(this.$Api.classsList, params, "POST")
				uni.stopPullDownRefresh()
				if (data.code !== 0) return
				this.classPageList = data.data.list
			},
			tabChange(times) {
				this.time = times
				this.serachTime = ''
				console.log('tabChangetabChange', times)
				this.getClassList()

			},
			tabChangeType(types) {
				this.type = types
				this.getClassList()
				console.log('typestypestypes', types)
			}
		}
	};
</script>

<style lang="scss">
	.serverCont {
		width: 750rpx;
		height: 82rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #F5A623;
		line-height: 82rpx;
		padding: 0 40rpx;
		box-sizing: border-box;

	}

	.tabar {
		background: #fff;
		margin-top: 20rpx;
		padding: 32rpx 0;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.tabarweek {
		background: #fff;
		margin-top: 20rpx;
		width: 100%;
		// overflow: hidden;
	}

	.serverTime {
		color: #000;
		margin-top: 20rpx;
		line-height: 66rpx;
		font-weight: bold;
		font-size: 28rpx;
		padding: 0 32rpx;

		span {
			color: #666;
			font-weight: 500;
			font-size: 24rpx;
		}

	}

	.serverList {
		background: #fff;
		margin-top: 20rpx;
		width: 100%;
		// overflow: hidden;
	}
</style>